import React from 'react';
import { Database, BarChart2, LineChart } from 'lucide-react';
import { AppState } from '../types';

interface TabBarProps {
  activeTab: AppState['activeTab'];
  onTabChange: (tab: AppState['activeTab']) => void;
}

const TabBar: React.FC<TabBarProps> = ({ activeTab, onTabChange }) => {
  const tabs = [
    { id: 'data' as const, label: 'Data Input', icon: <Database size={18} /> },
    { id: 'prediction' as const, label: 'Prediction', icon: <LineChart size={18} /> },
    { id: 'evaluation' as const, label: 'Evaluation', icon: <BarChart2 size={18} /> },
  ];

  return (
    <div className="flex bg-gray-50 border-b border-gray-200">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          className={`flex items-center gap-2 py-3 px-5 font-medium transition-colors
            ${activeTab === tab.id
              ? 'text-blue-600 border-b-2 border-blue-600 bg-white'
              : 'text-gray-600 hover:text-blue-500 hover:bg-gray-100'
            }`}
          onClick={() => onTabChange(tab.id)}
        >
          {tab.icon}
          <span>{tab.label}</span>
        </button>
      ))}
    </div>
  );
};

export default TabBar;